<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用DOM的getElementById方法和className属性设计折叠与展开网页内容的特效</title>
<link href="css/left01.css"  rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-top: 0px;
}
.hid {display:none;}
.show {display:block;}
</style>
</head>
<body>
<table width="146" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td width="146">
      <table width="146"  border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td><img src="images/left01.gif"  border="0" width="146" height="20" /></td>
        </tr>
      </table>	
      <table width="146" border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td align="center" height="180" valign="top" background="images/34.jpg" > 
          <table id="s21" class="sub_tab" width="122" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="22" valign="middle" id="td_21"  onClick="javascript:switchShow2(21,1);" class="sub_name_td">
              <img src="images/left02.gif"  width="5" height="7" />液晶显示器</td>
            </tr>
          </table>
          <div id="subTable21" class="hid" style="table-layout: fixed;width:100%">
              <table width="122"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="21%" height="25" align="center">
                    <img src="images/left03.gif"  width="5" height="7" /></td>
                    <td width="79%" align="left" class="hui12b">品牌</td>
                  </tr>
               </table>
              <table width="122"  border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
               <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  width="5" height="5" border="0" /></td>
                  <td width="95" align="left">三星</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg" width="5" height="5" border="0" /></td>
                  <td width="95" align="left">优派</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg" width="5" height="5" border="0" /></td>
                  <td width="95" align="left">冠捷</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  width="5" height="5" border="0" /></td>
                  <td width="95" align="left">飞利浦</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  border="0" alt="" height="5" width="5" /></td>
                  <td width="95" align="left">更多&gt;&gt;</td>
                </tr>
             </table>
        </div>
          <table id="s22" class="sub_tab" width="122" border="0" cellspacing="0" cellpadding="0">
             <tr>
                <td height="22" valign="middle" id="td_22" onClick="javascript:switchShow2(22,1);" class="sub_name_td">
                <img src="images/left02.gif"  width="5" height="7" /> 投影机</td>
             </tr>
          </table>            
          <div id="subTable22" class="hid" style="table-layout: fixed;width:100%">
              <table width="122"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="21%" height="25" align="center"><img src="images/left03.gif"  width="5" height="7" /></td>
                  <td width="79%" align="left" class="hui12b">品牌</td>
                </tr>
              </table>
              <table width="122"  border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  width="5" height="5" border="0" /></td>
                  <td width="95" align="left">东芝</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg" width="5" height="5" border="0" /></td>
                  <td width="95" align="left">索尼</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  width="5" height="5" border="0" /></td>
                  <td width="95" align="left">明基</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg"  width="5" height="5" border="0" /></td>
                  <td width="95" align="left">爱普生</td>
                </tr>
                <tr>
                  <td class="manu_bg_img" height="19">
                  <img src="images/left04.jpg" border="0" alt="" height="5" width="5" /></td>
                  <td width="95" align="left">更多&gt;&gt;</td>
                </tr>
              </table>
          </div>  
          <table id="s23" class="sub_tab" width="122" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="22" valign="middle" id="td_23" onClick="javascript:switchShow2(23,1);" class="sub_name_td">
              <img src="images/left02.gif"  width="5" height="7" />投影灯泡</td>
            </tr>
          </table>                  
        </td>
       </tr>
      </table>
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/left05.jpg"  width="146" height="13" /></td>
        </tr>
      </table> 
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
  var cache_sub_id = 0;
  var id = 21;
  document.getElementById("subTable"+id).className = "show";
  cache_sub_id = id;
  
  function switchShow2(id,tag){
	var tObj = document.getElementById("subTable"+id);
	var	cObj = document.getElementById("subTable"+cache_sub_id);
	if(tag)
	{ 
		if(tObj) tObj.className =(tObj.className=='hid') ? "show" : "hid";
	}
	
	if(cache_sub_id != id)  //单击一个按钮隐藏另一个按钮
	{
		cache_sub_id = id;
		if(cObj)cObj.className = "hid";
	}
	event.cancelBubble = true;
  }
</script>

</body>
</html>